@charset "utf-8";
/*
 *	Author		：WoodyCai
 *	Time		：2017.06.14
 *	Abstract	：深银联集团官网样式文件
 *
 */

//scss
@import "base.scss";


/*
 *	Common
 */
body { background: #f5f5f5; font-size:12px; line-height:24px;font-weight:200;  color:#5a5a5a; font-family: Arial, Helvetica, "微软雅黑", "Microsoft YaHei", "宋体", sans-serif; padding-top:86px; }

//iconfont
@font-face {
    font-family: 'iconfont';  /* project id 346978 */
    src: url('//at.alicdn.com/t/font_346978_eop57dmjo8ugnwmi.eot');
    src: url('//at.alicdn.com/t/font_346978_eop57dmjo8ugnwmi.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_346978_eop57dmjo8ugnwmi.woff') format('woff'),
    url('//at.alicdn.com/t/font_346978_eop57dmjo8ugnwmi.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_346978_eop57dmjo8ugnwmi.svg#iconfont') format('svg');
  }
.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.popup-shadow , .wx-shadow { display: none; position: fixed; z-index: 100; left:0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }

//color
$gold:#cda156;
$blue:#38519f;
$yellow:#ffd200;
$red:#ef0d0d;
$pink:#e90037;
$black:#000;
$gray:#5a5a5a;
$orange:#f87400;
$bordercolor:#e4e4e4;


.blue { color:$blue; }
.red { color:$red; }
.yellow { color:$yellow; }
.gray { color: #949494; }
.black { color:#000; }

.font14 { font-size:14px; }
.font16 { font-size:16px; }
.font18 { font-size:18px; }
.font24 { font-size:24px; }
// bg
.gray-bg { background:#f5f5f5; }
.white-bg { background: #fff; }
// pages
/* 分页 */
.page_wrap { height: 34px; margin: 40px 20px;  font: normal 14px/34px "微软雅黑",Arial; color: #999; 
  .pagination { height: 34px; text-align:center;
    li { display:inline-block; margin-right:10px; background: #fff; padding: 0 10px; min-width: 12px; height: 32px; font: normal 14px/32px "微软雅黑",Arial; text-align: center; border: solid 1px #ddd; }
    .rows { width: 100px; }
    li a { display:block; width:100%; height:100%; color:#999; }
    li:hover { background: $bordercolor; text-decoration:none; }
    li.active { color:#000; background: $yellow; border-color:$yellow; }
  }
  .page_total { float: left; margin-left:20px; height: 34px; }
  .page_skip { float: left;  height: 34px;  
    input { width:30px; text-align:center; height:32px; border:1px solid #ddd; margin:0 6px; }
  }
  .page_skip .sub_btn { display: inline-block; border: solid 1px #ddd; padding:0 5px; color: #333; }
  .page_skip .sub_btn:hover { background: #c71e21; color: #fff; border: solid 1px #c71e21 ;  }
}

// a
a { color:#000; @include transitionAll;
  &:hover { color:$blue; }
}

// btn
.btn { border:1px solid #000; line-height:34px; border-radius:4px; color:#000; background:#fff; text-align:center; }
.btn-yellow { border-color:$yellow; color:#fff; background:$yellow; }
.btn-red { border-color:$red; color:#fff; background:$red; }
.btn-black-line { border-color:$black; background:#fff; color:$black; }
.btn-red-line { border-color:$red; background:#fff; color:$red; }
.btn-yellow-line { border-color:$yellow; background:#fff; color:$yellow; }
.btn-blue-line { border-color:$blue; background:#fff; color:$blue; }
.btn-gray-line { border-color:$gray; background:#fff; color:$gray; }
//margin
.mgb35 { margin-bottom: 35px; }
.mgt10 { margin-top:10px!important; }
.mgt20 { margin-top:20px!important; }
.mgt30 { margin-top:30px!important; }
.mgt0 { margin-top:0px!important; }
// bg
.bg-gray { background: #f2f2f2; }

.boxShadow { box-shadow:2px 2px 5px rgba(150,150,150,0.1); border-radius:6px; }
.boxShadow02 { box-shadow:2px 2px 5px rgba(150,150,150,0.1); }

// iconpng
.icon-01 { background:url(../images/icon-01.png) no-repeat; }
//header
// <div class="top-bar">
//     <div class="wrap1200">
//         <span class="fl"><i class="iconfont">&#xe600;</i>客服热线：400-0606-108</span>
//         <p class="fr">
//             <a href="/Home/User/logout.html">蔡应[退出]</a>|
//             <a class="top-bar-wechart iconfont" href="javascript:;">
//                 &#xe641;
//                 <span>
//                     <img src="/template/pc/p2p/static/images/qr-code.jpg" alt="">
//                 </span>
//             </a>|
//             <a href="/home/help/index.html">帮助中心</a>
//         </p>
//     </div>
// </div>
.top-bar { height:30px; line-height:30px; background:#f1f1f1; color:$gray;
    .fr { text-align:right; }
    a { color:$gray; margin-left:10px; }
    .login-out { color:$blue; }
    .top-bar-wechart { color:#00cd00; font-size:20px; }
}
.header-wrap { position:fixed; top:0; left:0; width:100%; z-index:50; }
.header {  width:100%; height:45px; padding: 20px 0; background: #fff; font-size:16px; line-height:45px; border-bottom:1px solid #ccc;
    #logo img { height:40px; width: auto; margin-top:8px; }
    #nav { width:700px; margin-left: 60px; 
        li { display:inline-block; padding:0 15px; position:relative;
            a {  display:inline-block; color:#000; height:43px; border-bottom:2px solid #fff;
                &.current, &:hover { color:$blue; border-color:$blue; }
            }
            .sun-nav { display:none; position:absolute; left:-10px; top: 40px;  z-index: 100; background:#fff; text-align:center; width:120px; @extend .boxShadow; padding:10px 0; box-shadow:2px 2px 5px rgba(150,150,150,0.5);
                a { display: block; border:none; 
                    &:hover { background:$yellow; color:#000; }
                }
            }
        }
        .service-link:hover .sun-nav { display:block; }
    }
    .login-btn-wrap {  width: 190px; margin-top:5px;
        a { @extend .btn; float:left; width:78px; 
            &.reg-btn { @extend .btn-yellow;  color:#000; }
            &.login-btn { @extend .btn-black-line; margin-right:20px; border-color:$yellow; }
        }
    }
    .user-login { position:relative;z-index:50; width: 180px; margin-top:5px; position:relative;
        dt { font-size:16px; color:#000; 
            .iconfont { display:inline-block; color:#000; transition:1s all ease;  }
            img { float:left; margin-left:10px; margin-top:6px; margin-right:10px; border-radius:50%; width:32px; height:32px; }
        }
        dd { z-index:50; display:none; z-index:50; position:absolute; top:45px; right:0; width:100%; padding-bottom:10px; line-height:36px; font-size:14px; background:#fff;
            a { display:block; text-align:center; 
                &:hover { background:$yellow; }
            }
        }
        &:hover { 
            dd { display:block; border-radius: 0 0 4px 4px; box-shadow:2px 2px 5px rgba(150,150,150,0.5);}
            dt { color:$blue; border-radius:4px 4px 0 0; box-shadow:2px 2px 5px rgba(150,150,150,0.5); }
            .iconfont { color:$blue; transform:rotate(180deg); }
        }
    }
}

// footer
.footer { background: #2f2f2f;
    .footer-link { @extend .clearfloat;  padding: 40px 0; 
        .foot-logo { margin-top:10px; margin-right:80px; }
        .link-list { width:120px; border-right:1px solid #444; margin-right:80px; 
            dt { font-size:14px; color:#ccc; }
            dd { margin-top:10px; width:100px; 
                a { display:block; color:#999;
                    &:hover { color:#fff; }
                } 
            }
        }
        .contact-info { width:300px; line-height: 30px; margin-left: 0px; font-size: 14px; color:#999;
            li { vertical-align: middle; }
            .phone { font-size: 18px; color: #fff; margin-bottom:5px;
                i { font-size: 30px; }
            }
            i { display: inline-block; font-size: 20px; width:30px; margin-right:10px; vertical-align: middle; text-align: center; }
            a { color: #999;
                &:hover { color: #fff; }
            }
        }
        .ewm {  text-align:center; color:#999; margin-left:100px;
            li { float:left; width:100px; margin-right:50px; }
            img { width:100px; height:100px;}
        }
    }
    .copyright { background: #1f1f1f; color:#606060; text-align: center; font-size:12px; line-height: 40px;  
        a { color: #606060; margin-left: 30px; }
    }
}

// 侧边导航
.side-quick { position:fixed; width:50px; right:20px; bottom:20px; z-index:50; display:none;
    a { position:relative;  @extend .iconfont; line-height: 50px; font-size:20px; text-align:center; margin-top:10px; display:block; background:$blue; width:50px; height:50px; color:#fff; border-radius:100%; box-shadow:0 5px 10px rgba(100,100,100,0.2);  
        &:hover { @include opacity90; }
    }
    .to-top { @include opacity0; }
    .ph-num {  @include opacity0; display:none; position:absolute; bottom: 5px; right: 70px; width: 140px; text-align: center; color: #fff; background: rgba(33,42,49,0.8); border-radius: 3px; height: 30px; line-height: 30px; padding:5px 10px; box-shadow: 0 8px 6px rgba(0,0,0,0.1); font-size: 18px; }
    .arrow-left { width: 0px; height: 0px; position: absolute; bottom: 17px; right: -6px; border-left: 6px solid rgba(33,42,49,0.8); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

    .ewm-img {  @include opacity0; display:none; position:absolute; bottom: 5px; right: 70px; width: 230px; height:120px; text-align: center; color: #fff; background: rgba(33,42,49,0.8); border-radius: 3px; line-height: 20px; padding:10px 0; box-shadow: 0 8px 6px rgba(0,0,0,0.1); font-size: 14px; 
        li { float:left; width:100px; margin-left:10px; text-align:center; 
            img { width:100%; height:auto; }
        }
    }
    .arrow-left { width: 0px; height: 0px; position: absolute; bottom: 17px; right: -6px; border-left: 6px solid rgba(33,42,49,0.8); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
}

// 登录框
.bg-shadow { display:none; position:fixed; z-index:100; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); }
.login-popup ,.login-box { display:none; transform:scale(0); transition:.5s All ease;  z-index:200; @extend .boxShadow; background: #fff; position:fixed; top:50%; left:50%; margin:-220px 0 0 -220px; width:360px; padding:40px;
    img { display:block; margin:0 auto; }
    ul { font-size:16px;
        li { margin-top:30px; @extend .clearfloat; }
        input[type=text] , input[type=password] { background: #fff; border:1px solid $bordercolor; border-radius:4px; padding:15px 20px; line-height:20px; font-size:16px; color:#000; display:block; width:318px; }
        input[type=button] { background:$yellow; border-radius:4px; padding:15px 20px; line-height:22px; border:none; font-size:18px; color:#000; display:block; width:360px; }
        li:last-of-type { text-align:center; margin-top:20px;
            a { color:$blue; }
        }
    }
}
.login-box { display: block; position:relative; margin:100px auto; transform:scale(1); left:0; top:0; z-index: 1;  }

// 用户注册
.reg-box ,.forget-password{ background: #fff; @extend .boxShadow; padding:40px; width:700px; margin:60px auto;
    h4 {font-size:24px; color:$blue; text-align:center; margin-bottom:50px; line-height:1; }  
    form { width:520px; margin:0 auto; }
    dl { @extend .clearfloat; line-height:40px; margin-bottom:20px;
        dt { float:left; width:100px; text-align:right; font-size:18px; color:#000; }
        dd { float:right; width:400px;
            input[type=text] ,input[type=password] { background: #fff; border:1px solid $bordercolor; border-radius:4px; padding:9px 20px; line-height:20px; font-size:16px; color:#000; display:block; width:358px; }
            .short-text { width:200px!important; float:left; }
            .get-phone-code { width:145px; font-size:14px; color:#000; background:$bordercolor; text-align:center; border-radius:4px; }
            .img-code { width:143px; border:1px solid $bordercolor; border-radius:4px; 
                img { width:100%; height:38px; display:block; }
            }
            input[type=button]  { background:$yellow; border-radius:4px; padding:15px 20px; line-height:22px; border:none; font-size:18px; color:#000; display:block; width:360px; }
        }
        .protocol-check { font-size:16px; 
            a { color:$blue; }
        }
    }
}
// 注册协议
.reg-protocol { margin:60px auto; width:940px; @extend .boxShadow; background: #fff; padding:40px 30px; font-size:14px; line-height:32px;
    h2 { font-size:24px; text-align:center; margin-bottom:40px; }
    h4 { font-weight:bold; color:#000; font-size:16px; text-indent:2em; }   
    p { text-indent:2em; }
}



/* 首页 */
.index { 
    .banner { position:relative; overflow:hidden; height:650px; 
        .swiper-container { @include abs(-360px,0); display:block; height:650px; width:1920px; 
            img { display:block; width:1920px; height:650px; }
        }
        .swiper-pagination span { width:40px; height:5px; border-radius:0; }
        .swiper-pagination-bullet-active { background:$blue; }
        .banner-t { position:absolute; background:url(../images/index/banner-title.png) no-repeat; height:100px; width:700px; }
        .ani-01 { left:363px; top:220px; background-position:0px 0px; }
        .ani-02 { left:363px; top:283px; background-position:0px -100px; }
        .ani-03 { left:363px; top:200px; background-position:0px -200px; }
        .ani-04 { left:363px; top:266px; background-position:0px -300px; }
        .ani-05 { left:363px; top:190px; background-position:0px -400px; }
        .ani-06 { left:363px; top:268px; background-position:0px -500px; }
        .ani-07 { left:363px; top:326px; background-position:0px -600px; }
        .ani-08 { left:363px; top:180px; background-position:0px -700px; }
        .ani-09 { left:363px; top:216px; background-position:0px -800px; }
        .ani-10 { left:363px; top:280px; background-position:0px -900px; }
        .ani-11 { left:363px; top:346px; background-position:0px -1000px; }
        .ani-12 { left:363px; top:180px; background-position:0px -1100px; }
        .ani-13 { left:363px; top:230px; background-position:0px -1200px; }
        .ani-14 { left:363px; top:305px; background-position:0px -1300px; }
        .banner-btn { position:absolute; top: 370px; left: 363px; border-radius:18px; display:block; line-height: 36px; width:130px; background:$yellow; color:#000; text-align:center; font-size:16px; 
            &:hover { @include opacity90;  }
        }
        .banner-btn-02 { left: 520px; } 
        .banner-btn-03 { top: 420px; } 
    }

    .section-title { font-size:18px; line-height:50px; color:$gray; text-align:center;
        h2 { font-size:36px; font-weight:bold; color:#000; line-height:1;
            em { color:$blue; }
        }
        .bg-line { width:40px; background: $blue; height:3px; margin:0 auto; @include overHeight(3px); }
    }
    // 我们的服务
    .our-service { background:url(../images/index/bg-repeat.png) repeat; padding:60px 0; height:560px; 
        .service-list { @extend .clearfloat; margin-top:50px;
            .fl { }
            ul { width: 960px; @extend .clearfloat;
                a { float: left; overflow: hidden; position: relative; 
                    img{ display: block; transition:all 0.5s ease; }
                    h4 { position: absolute; top:30px; left: 30px; color: #000; font-size:18px; line-height: 1.5;
                        em { color: $pink; font-size:14px; display: block; }
                        i { font-size:24px; font-style: normal;  margin-right:3px; }
                    }
                    .m-t { top:60px; font-size: 24px; 
                        em { color: $pink; font-size:18px; display: block; }
                        i { font-size:30px; font-style: normal; }
                    }
                    &:hover {
                        img { transform:scale(1.1); }
                    }
                }
                .border-right { border-right:1px solid $bordercolor; }
                .border-top { border-top:1px solid $bordercolor; }
            }
        }
    }
    // 顾问卡
    .adviser-card { background:url(../images/index/bg-repeat.png) repeat; padding:60px 0; height:630px; 
        .adviser-tab { margin-top:40px;
            .tab-item { display:none; color:$gray; background:#fff; @extend .boxShadow; padding:50px 40px;  font-size:18px;
                ul { @extend .clearfloat; 
                    li { float:left; width:223px;  text-align: center; border-right:1px solid $bordercolor; padding:20px 0;
                        &:nth-of-type(5n+5) { border:none; }
                         &:nth-of-type(5n+5) { }
                        h4 { font-size:24px; line-height:50px; font-weight:normal;
                            em { color:$pink; font-size:36px; margin-right:10px;  }
                        }
                    }
                }
                .price { text-align:center; margin-top:50px;
                    em { font-size:48px; margin-right:10px; color:#000; }
                }
            }
            .tab-menu { @extend .clearfloat; margin-top:20px;
                a {  text-align:center; color:#fff;  letter-spacing:4px; float:left; width:285px; height:60px; line-height:60px; font-size:24px; margin-right:20px; background:url(../images/index/btn-bg.png);
                    &:hover ,&.current { background:url(../images/index/btn-hover.png); }
                    &:last-of-type { margin-right:0; }
                }
            }
        }
    }
    // 为什么选择律団
    .why-lvtuan { background:#fff url(../images/index/bg-02.png) no-repeat center 200px; padding:60px 0; 
        .check-reason { @extend .clearfloat; margin-top:40px;
            li { float:left; width:300px; padding:0 50px; height:320px; text-align:center; font-size:16px; color:$gray;
                img { display:block; margin:0 auto; }
                .title { font-size:24px; color:#000; line-height:60px;
                    em { color:$pink; }
                }
            }
        }
    }
    // 律师团队
    .lawyer-show-wrap { background:url(../images/index/bg-03.jpg) no-repeat center top; height:660px; padding:60px 0; overflow:hidden; 
        .section-title { color:#fff; 
            h2 { color:#fff; }
            img { display:block; margin:0 auto; }
            .bg-line { background:#fff; }
        }
        .lawyer-recommend-list-wrap { position:relative; width:1200px; }
        .lawyer-recommend-list { @extend .clearfloat; position:absolute; left:-320px; top:40px;  width:3600px; 
            li { float:left; margin-top:60px; width:320px; background:#fff; text-align:center; margin-left:40px; padding-bottom:20px; border-radius:8px; overflow:hidden; font-size:14px; color:$gray; @include transitionAll; 
                img { display:block; width:100%; height:220px; }
                h4 { line-height:1.8; color:#999; margin-top:10px;
                    em { font-size:18px; display:block; color:#000; }
                }
                p { display:none; width:80%; margin:0 auto; margin-top:10px; text-align:left; }
                a { display:none; margin:20px auto; line-height:36px; color:#fff; border-radius:16px; background:$blue; width:160px; font-size:16px; box-shadow:0px 5px 10px rgba(56,81,159,0.5);}
                &.active { margin-top:0;
                    p { display:block; }
                    a { display:block; }
                }
            }
        }
        .lawyer-recommend-list02 { @extend .clearfloat;  margin-top:20px; height:540px; overflow: hidden;
            li { float:left; margin-top:20px; width:590px; height:250px; background:#fff; margin-right:20px; border-radius:6px; overflow:hidden; font-size:14px; color:$gray; @include transitionAll; 
                &:nth-of-type(2n) { margin-right:0; }
                img { display:block; float: left; width:200px; height:auto; }
                .text { float:left; width: 310px; padding: 20px 40px;  }
                h4 { line-height:1.8; color:#999; font-size:18px;
                    em {  margin-right:10px; color:#000; }
                }
                p { margin:20px 0; text-align:left; line-height: 30px; }
                a { display:block; text-align: center;  line-height:36px; color:#000; border-radius:16px; background:$yellow; width:160px; font-size:16px;}
            }
        }
        .prev-btn ,.next-btn { position:absolute; top: 230px;  @extend .iconfont; font-size:30px; width:56px; height:56px; line-height:56px; background:rgba(0,0,0,0.5); color:#fff; text-align:center; border-radius:50%;
            &:hover { background:$blue; }
        }
        .prev-btn { left: 55px; }
        .next-btn { right:55px; }
        .swiper-pagination { bottom: -20px; }
    }
    // 客户评价
    .customer-evaluate { background:#fff; padding:60px 0;
        .customer-list { text-align:center; @extend .clearfloat; margin-top:40px;
            a { display:inline-block; width:240px; height:260px; margin:0 20px; font-size:16px; line-height:1.6; color:#999;
                img { display:block; width: 160px; height:160px; border-radius:50%; margin:0 auto; border:10px solid $bordercolor; @include transitionAll; }
                h4 { font-size:24px; margin-top:10px; color:#000; }
                &:hover img ,&.current img { border-color:$blue; }
            }
        }    
        .evaluate-list { position:relative; background:url(../images/index/bg-04.jpg) no-repeat 0 -13px; width:1060px; height:123px; padding:20px 20px; font-size:18px; color:#000; margin:0 auto; margin-top:20px; 
            .arrow-top { width: 0px; height: 0px; position: absolute; top: -15px; left: 108px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid $yellow; }
            li { @include abs(80px,40px); display:none; width:920px; line-height: 2;  }
        }
    }
    // 律団资讯
    .news-recommend { padding:60px 0;
        ul { @extend .clearfloat; padding-bottom:40px; margin-top:40px;
            li { float:left; width:320px; margin-left:32px; margin-bottom:30px; padding:20px 20px 0 20px; background:#fff; border-radius:0; 
                img { display:block; width:100%; height:220px; }
                h4 { font-size:18px; margin:20px auto 10px; line-height:1.2; @extend .textover; color:#000; text-align:left; }
                p { color:#5a5a5a; }
                .time { margin-top:10px; height:50px; border-top:solid 1px $bordercolor; font-size:14px; color:#5a5a5a; line-height:50px;
                    span { float:left; width:200px; }
                    em { float:right; color:#000; }
                }
                &:hover { @extend .boxShadow02; 
                    h4 { color:$blue; }
                }
            }
        }
        .look-more { display:block; margin:0 auto; width:140px; line-height: 40px; border-radius:20px; background:#d2d2d2; color:#000; font-size:16px; text-align:center; 
            i { display:inline-block; @include transitionAll; }
            &:hover { background:$yellow; 
                i { @include transform(translateX(10px)); }
            }
        }
    }
    // 合作伙伴
    .partner { padding:40px 0; background:#fff;
        .partner-list { @extend .clearfloat; margin:40px auto; 
            li { border:1px solid $bordercolor; border-top:none; border-right:none; float:left; @extend .img-gray; background:#fff;
                &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4),&:nth-of-type(5), &:nth-of-type(6) { border-top:1px solid $bordercolor; }
                &:nth-of-type(6n) { border-right:1px solid $bordercolor; }
                &:last-of-type { border-right:1px solid $bordercolor; }
                img { display:block; width::180px; height:112px; border:5px solid #fff; }
                &:hover img { border-color:$bordercolor; }
            }
        }
    }       
}

// inside-banner
.inside-banner-wrap { height:320px; overflow:hidden;
    .inside-banner { @include abs(-360px,0); display:block; } 
    .ani-t { position:absolute; background:url(../images/anit.png) no-repeat; width:550px; height:100px; left:200px; }
    .ani-t01 { left:120px; top:110px; background-position:0 0; }
    .ani-t02 { left:120px; top:160px; background-position:0 -100px; }
    .ani-t03 { left:120px; top:110px; background-position:0 -200px; }
    .ani-t04 { left:120px; top:150px; background-position:0 -300px; }
    .ani-t05 { left:120px; top:110px; background-position:0 -400px; }
    .ani-t06 { left:120px; top:160px; background-position:0 -500px; }
    .ani-t07 { left:40px; top:110px; background-position:0 -600px; }
    .ani-t08 { left:40px; top:170px; background-position:0 -700px; }
    .ani-t09 { left:520px; top:70px; background-position:0 -800px; }
    .ani-t10 { left:420px; top:140px; background-position:0 -900px; }
    .ani-t11 { left:40px; top:80px; background-position:0 -1000px; }
    .ani-t12 { left:40px; top:140px; background-position:0 -1100px; }    
}

/* 右侧边展示 */
.side-right { width:280px; margin-top:20px; 
    // 提问
    .make-question { background:$blue; border-radius:8px; padding:0 10px 10px 10px; color:#fff; 
        h4 { font-size:18px; text-align:center; line-height:60px; }
        dl { border-radius:4px; padding:0 10px; background:#fff; margin-bottom:10px;
            dt { color:#969696; line-height:40px; 
                i { float:right; transition:1s all ease; 
                    &.current { transform:rotate(180deg); }
                }
            }
            dd { display:none; @extend .clearfloat;  border-top:1px solid $bordercolor; padding-bottom:10px;
                a { float:left; text-align:center; border-radius:4px; color:#888; margin-right:10px; margin-top:10px; font-size:12px; width:71px; border:1px solid $bordercolor; 
                    &:nth-of-type(3n) { margin-right:0; }
                    &:hover {  background:$bordercolor; color:#333; }
                    &.current { border-color:$yellow; background:$yellow; color:#333; }
                }
            }
        }
        input { display:block; margin-bottom:10px; width:240px; border-radius:4px; padding:10px; background:#fff; border:none; line-height:20px; }
        textarea { @include textareaSize(240px,100px);padding:10px; border-radius:4px; border:none; }
        .answer-sure { display:block; width:120px; font-size:18px; @extend .btn; @extend .btn-yellow; color:#000; }
    }
    .side-gg { margin-top:20px; border-radius:8px;   
        img { }
    }
    .hot-news { @extend .boxShadow; background: #fff; overflow:hidden;
        h4 { background:$blue; color:#fff; font-size:16px; line-height:40px; padding:0 10px; }
        ul { padding:10px; }
        li { border-bottom:1px solid $bordercolor; 
            &:last-of-type { border:none; }
            dt { font-size:14px; color:#000; font-size:14px; line-height:30px; }
            dd { color:#5a5a5a; padding-bottom:10px; display:none; }
        }
    }
}

/* 免费咨询 */
.free-question { @extend .clearfloat; margin-bottom:60px;
.question-kinds { @extend .clearfloat;  height: 125px; background:#fff; border-bottom:1px solid $bordercolor; 
    dt { @include abs(0,-40px); width:100px; height:100px; @extend .icon-01; }
    dd { padding-left:120px; padding-top:16px;}
        a { float:left; margin-bottom:16px; width:120px; line-height: 36px; text-align:center; font-size:16px; border-radius:18px; color:#000;
            &.current { background:$yellow; }
            &:hover { background:$bordercolor; }
        }
    }
}
.question-list-left { width:900px; margin-top:20px;
    .question-sort { @extend .boxShadow; height:32px; padding:20px 24px; line-height:32px;  background:#fff;
        dl { @extend .clearfloat; width:400px ; font-size:16px;
            dt { float:left; color:#000; }
            dd { float:left; 
                a { margin:0 15px; display:inline-block; padding:0 10px; height:50px; border-bottom:2px solid #fff; color:$gray; 
                    &.current { color:$blue; border-color:$blue; }
                }
            }
        }
    }
    .question-search { height:40px;  width:300px; font-size:14px; 
        input { float:left; width:219px; line-height:24px; border:1px solid $bordercolor; padding:3px 10px; border-right:none; background:#fff; border-radius:4px 0 0 4px; }
        a { float:right; width:60px; background:$yellow; font-size:14px; color:#000; text-align:center; line-height:32px; border-radius:0 4px 4px 0; }
    }
    .question-list { @extend .boxShadow; margin-top:20px; background:#fff; padding:20px;
        .question-list-item { border-top:1px solid $bordercolor; padding:20px 0;
            &:first-of-type { border-top:none; }
            &:hover { 
                .question-title .main-t h4 { color:$blue; }
                .answer-wrap { display:block;}
            }
            .question-title { @extend .clearfloat; 
                .kind-name { font-size:13px; color:#000; line-height:1.2; text-align:center; @extend .icon-01; letter-spacing:1px; width:40px; height:42px; padding:7px 2px 0 3px; background-position:-1px -104px; }
                .main-t { width:630px; margin-left:10px; line-height:1.6; font-size:12px;
                    h4 { color:$black; font-size:16px; }
                }
                .counts { width:130px; 
                    li { float:left; width:65px; text-align:center; line-height:1.1;
                        em { color:$orange; font-size:20px; display:block; font-weight:normal; }
                    }
                }
            }
            .answer-wrap { display:none; margin-top:20px; position:relative; border:solid 1px $bordercolor; box-shadow:0 2px 5px rgba(0,0,0,0.1); border-radius:6px; padding:20px; 
                .arrow { @include abs(50px,-13px); @extend .icon-01; width:28px; height:13px; background-position:0 -200px; }
                .answer-head { line-height:50px; font-size:16px; color:#000;
                    img { width:50px; height:50px; border-radius:50%; margin-right:20px; }
                    span { font-size:12px; color:#999; }
                }
                .main-answer { color:#5a5a5a; margin-top:10px; 
                    a { color:$red; }
                }
            }
        }
    }
}

/* 咨询详情 */
.question-detail-wrap { width:900px; margin-top:20px; 
    .question-con { @extend .boxShadow; background:#fff; padding:20px;
        .question-title { @extend .clearfloat; 
            .kind-name { font-size:13px; color:#000; line-height:1.2; text-align:center; @extend .icon-01; letter-spacing:1px; width:40px; height:42px; padding:7px 2px 0 3px; background-position:-1px -104px; }
            .main-t { width:630px; margin-left:10px; line-height:1.8; font-size:12px;
                h4 { color:$black; font-size:24px; }
            }
            .counts { width:130px; 
                li { float:left; width:65px; text-align:center; line-height:1.1;
                    em { color:$orange; font-size:20px; display:block; font-weight:normal; }
                }
            }
        }
        .question-text { font-size:14px; line-height:30px; color:#333; padding:10px 20px; background:#f6f6f6; margin-top:20px; }
        .question-head { line-height:40px; font-size:16px; color:#000; margin-top:20px;
            img { width:40px; height:40px; border-radius:50%; margin-right:20px; }
            span { font-size:12px; color:#999; }
        }
    }
    .answer-list { @extend .clearfloat; padding:0 20px 100px 20px; background:#fff;  @extend .boxShadow; margin-top:20px;
        h2 { line-height:60px; font-size:24px; color:$blue; border-bottom:1px solid $bordercolor;
            i { font-size:30px; margin-right:10px; }
            span { float:right; font-size:14px; color:$gray; 
                em { color:$orange; margin-right:5px; }
            }
        }
        .question-again-item ,.answer-item { @extend .clearfloat; width:700px; margin-top:30px; float:left;
            img { width:50px; height:50px; border-radius:50%; }
            .item-con { width:630px; background:#f6f6f6; @extend .boxShadow; overflow:hidden;
                h4 { font-size:16px; color:#000; line-height:40px; padding:0 20px; background:#f2f2f2;
                    span { color:$gray; font-size:12px; }
                }
                .text { padding:10px 20px; font-size:14px; line-height:30px; }
            }
        }
        .answer-item { float:right; }
    }
    .make-answer { @extend .clearfloat; padding:0 20px 20px 20px; background:#fff;  @extend .boxShadow; margin-top:20px;
        h2 { line-height:60px; font-size:24px; color:$blue; 
            i { font-size:30px; margin-right:10px; }
            span { float:right; font-size:14px; color:$gray; 
                em { color:$orange; margin-right:5px; }
            }
        }
        textarea { border:1px solid $bordercolor; width:800px; padding:10px 20px; @include textareaSize(820px,100px); border-radius:4px; font-size:14px; }
        .btn-wrap { @extend .clearfloat; margin-top:20px; 
            a { float:right; line-height:32px; border:none; background:$yellow; color:#000; font-size:16px; width:80px; margin-left:10px; @extend .boxShadow; text-align:center; }
            .answer-btn { background:$blue; color:#fff;}
        }
    }
}

/* 法律文书 */
.doc-list { margin-top:20px; @extend .clearfloat; color:#888;
    li { float:left; margin-right:22px; margin-bottom:20px; @extend .boxShadow; width:285px; background:#fff; line-height:22px;
        &:nth-of-type(3n) { margin-right:0; }
        &:hover h4 { color:$blue; }
        .text { padding:20px; }
        h4 { font-size:20px; line-height:1; color:#000; }
        .des { margin:10px auto; height:66px; }
        .info-l { padding:10px 20px; border:1px solid $bordercolor; background:#f5f5f5; border-radius:4px;
            span { margin-right:15px;  }
            em { color:#000; }
        }
        .count-l { @extend .clearfloat; font-size:14px; padding-top:15px;
            span { float:left; width:30%;
                &:nth-of-type(1) { width:40%; }
                &:nth-of-type(2) { text-align:right; }
                &:nth-of-type(3) { text-align:right; }
            }
        }
        .download { padding:20px; border-top:1px solid $bordercolor; 
            a { display:block; @extend .btn; @extend .btn-yellow; width:100%; color:#000; font-size:16px; }
        }
    }
}

/* 新闻资讯 */
.news-bg { background:url(../images/news_bg.jpg) no-repeat center 86px; background-attachment:fixed; }
.news-list-wrap { padding-top:120px;
    .news-title { 
        h4 { font-size:36px; line-height:1; color:#fff; text-align:center; }
        .news-kind { margin:40px auto;  text-align: center; line-height:36px;
            a { display:inline-block; font-size:18px; padding:0 30px; margin:0 15px; color:#000; background:rgba(255,255,255,0.5); border-radius:18px; 
                &:hover ,&.current { background:$yellow; }
            }
        }
    }
    .news-list { @extend .clearfloat; padding-bottom:100px;
        li { float:left; width:330px; margin-left:30px; margin-bottom:30px; padding:20px 20px 0 20px; background:#fff; @extend .boxShadow; border-radius:0; 
            img { display:block; width:100%; height:220px; }
            h4 { font-size:18px; margin:20px auto 10px; line-height:1.2; @extend .textover; color:#000; text-align:left; }
            p { color:#5a5a5a; }
            .time { margin-top:10px; height:50px; border-top:solid 1px $bordercolor; font-size:14px; color:#5a5a5a; line-height:50px;
                span { float:left; width:200px; }
                em { float:right; color:#000; }
            }
        }
    }
}

/* 新闻详情 */
.news-detail { @extend .clearfloat; padding-bottom:60px; 
    .news-detail-con { @extend .boxShadow; background:#fff; margin-top:20px;  padding:20px; width:860px;
        .news-title { border-bottom:1px solid $bordercolor; padding:10px 0;
            h2 { font-size:36px; color:#000; line-height:1; margin-bottom:10px; text-align:left; }
            .news-base { @extend .clearfloat; color:#5b5b5b;
                .fl { width:500px; 
                    span { margin-right:40px; }
                }
                .fr { width:200px; text-align:right; 
                    span { margin-left:20px;}
                }
            }
        }
        .news-text { padding:40px 0;
            img { display:block; margin:0 auto; max-width:100%; }
            p { font-size:14px; line-height:1.5; }
        }
        .other-news { text-align:center; margin-top:40px;
            a { display:inline-block; margin:0 10px; line-height: 38px; border-radius:20px; border:1px solid $bordercolor; width:150px; font-size:16px; color:#000; }
        }
    }
    // 新闻评论

    .news-discuss { @extend .clearfloat; width:860px; padding:0 20px 100px 20px; background:#fff;  @extend .boxShadow; margin-top:20px;
        h2 { line-height:60px; font-size:24px; color:$blue; 
            i { font-size:30px; margin-right:10px; }
            span { float:right; font-size:14px; color:$gray; 
                em { color:$orange; margin-right:5px; }
            }
        }
        .question-again-item ,.answer-item { @extend .clearfloat; width:700px; margin-top:30px; float:left;
            img { width:50px; height:50px; border-radius:50%; }
            .item-con { width:630px; background:#f6f6f6; @extend .boxShadow; overflow:hidden;
                h4 { font-size:16px; color:#000; line-height:40px; padding:0 20px; background:#f2f2f2;
                    span { color:$gray; font-size:12px; }
                }
                .text { padding:10px 20px; font-size:14px; line-height:30px; }
            }
        }
        .answer-item { float:right; }
    }
    .make-discuss { @extend .clearfloat; background:#fff; padding-bottom:20px; border-bottom:1px solid $bordercolor;
        textarea { border:1px solid $bordercolor; width:800px; padding:10px 20px; @include textareaSize(820px,100px); border-radius:4px; font-size:14px; }
        .btn-wrap { @extend .clearfloat; margin-top:10px; 
            input { float:right; line-height:32px; border:none; background:$yellow; color:#000; font-size:16px; width:100px; margin-left:10px; @extend .boxShadow; }
            .answer-btn { background:$blue; color:#fff;}
        }
    }
}

/* 律师展示-列表 */
.lawyer-list { width:960px; margin:40px auto;
    li { background:#fff; border-radius:6px; border:1px solid $bordercolor; overflow:hidden; color:#000; height:160px; padding:20px 40px 20px 240px; position:relative; margin-bottom:20px; 
        img { @include abs0; width:200px; height:200px; }
        .base { float:left; width:200px; height:145px; padding-top:15px; font-size:14px; line-height:2; border-right:1px solid $bordercolor;
            h4 { font-size:24px; }
            .p1 { color:$gray; }
        }
        .des { float:right; width:440px; padding-top:15px;
            .kind { margin-bottom:10px; }
            .kind span { font-size:14px; display:inline-block; padding:0 20px; border:1px solid $bordercolor; margin-right:20px; line-height:32px; border-radius:4px; }

        }
        &:hover {  @extend .boxShadow; }
    }
}

/* 律师详情 */
.lawyer-bg { background:url(../images/lawyer_bg.jpg) no-repeat center top;  padding:40px 0;}
.lawyer-detail { margin:0 auto;
    // .lawyer-top { @extend .clearfloat; border-bottom:1px solid $bordercolor; padding:40px; line-height:2; font-size:16px;
    //     img { float:left; width:200px; height:200px; }
    //     .info { float: right; width:680px;
    //         h4 {  font-size: 36px; color:$blue; line-height:1; }
    //         .territory  { margin-top:20px;
    //             span { font-size:14px; border-radius:4px; display:inline-block; padding:0 10px; background:$yellow; margin-right:10px; }
    //         }
    //         .orientation { font-size:14px; margin-top:10px;
    //             .iconfont { color:$blue; margin-right:10px; }
    //             p { }
    //         }
    //     }
    // }
    .lawyer-top { @extend .clearfloat; border-bottom:1px solid $bordercolor; padding:40px 0; line-height:2; font-size:16px;
        .img-over { float:left; width:200px; height:200px; overflow: hidden; border-radius: 50%;
            img { width:200px; height:auto; }
        }
        .info { float: right; width:680px;
            h4 {  font-size: 36px; color:$blue; line-height:1; }
            .territory  { margin-top:20px;
                span { font-size:14px; border-radius:4px; display:inline-block; padding:0 10px; background:$yellow; margin-right:10px; color:#000; }
            }
            .orientation { font-size:14px; margin-top:10px;
                .iconfont { color:$blue; margin-right:10px; }
                p { }
            }
        }
    }
    .lawyer-text { font-size:14px; line-height:2;  background:#fff; 
        h2 { font-size:16px; background:$bordercolor; padding:10px 20px; 
            em { font-size:20px; color:$blue; margin-right:10px; }
        }
        .text-con { padding:40px; }
        .text-item { margin-top:20px; 
            h4 { font-size:16px; color:#000; }
        }
    }
}

/* 法律服务 */
.service-con { padding-bottom:100px; 
    .service-base { margin:30px 0 20px 0; padding:20px; background:#fff; @extend .boxShadow; @extend .clearfloat;
        .fl { width:480px; 
            img { width: 100%; height:auto; }
        }
        .main-info { width:660px; font-size:14px; color:$gray; line-height:2;
            h4 { color:#000; font-size:24px; }
            .gray { color:#959595;  }
            i { font-style: normal; }
            .price { padding:10px 15px;  margin-top:10px;  background:#f5f5f5;
                .old-price i { text-decoration:line-through; color:#000; }
                .now-price { line-height: 30px;
                    i { color:$pink; font-size:16px; }
                    em { font-size:30px; }
                    .tip { margin-left:15px; position: relative; background: $yellow; display: inline-block; line-height: 24px; color:#000; padding:0 5px;border-radius: 4px; 
                        .arrow { width: 0px; height: 0px; position: absolute; bottom: 0px; left: -8px; border-bottom: 4px solid $yellow; border-left: 10px solid transparent; border-right: 10px solid transparent; }
                    }
                }
            }
            .check { margin-top:20px; border-bottom:1px solid $bordercolor; padding-bottom: 20px;
                a { font-size:14px; @extend .btn; display:inline-block; line-height:28px; margin-right:10px; border-radius:0; padding:0 10px; border-color:$bordercolor; border-radius:3px;
                    &.current { border-color:$pink; color:$pink; border-width:2px; }
                }
            }
            .look-contract { line-height: 20px; padding-top:15px; 
                a { color: $blue; }
            }
            .btn-wrap { @extend .clearfloat; margin-top:30px; font-size:16px;
                a { @extend .btn; float:left; width:120px; line-height:38px; margin-right:20px;  color:#000;
                    &:hover { @include opacity70; }
                }
                .buy-now { @extend .btn-yellow;  color:#000; }
                .online-btn { border-color:$yellow;  }
            }
            // .tip { font-size:12px; margin-top:20px;
            //     em { color:$red; }
            // }
        }
    }
}
// 服务详情
.service-des { font-size:14px; line-height: 24px; font-weight:200; 
    .mod { @extend .boxShadow; margin-bottom: 20px; background-color: #ffffff; position: relative; }
    .mod-title { font-size:36px; color: #000; line-height: 2; text-align: center; font-weight:200; }
    // 顾问套餐
    .mod-01 {  background:url(../images/service/guwen/bg_01.jpg) no-repeat center top;  height: 700px;
        h2 { @include abs(110px,80px);font-size:60px; line-height: 80px; font-weight:bold; }
        .p1 { @include abs(115px,250px);font-size:18px; line-height: 36px;  }
        .p2 { @include abs(216px,514px);font-size:20px; line-height: 30px; color:$blue; }
    }
    .mod-02 { padding: 40px 0 40px 0;
        ul { @extend .clearfloat; margin-top:40px;
            li { float: left; width:240px; height:300px; margin-left:120px;
                em { display: block; color: #000; font-size: 18px; padding: 10px 0 5px 0; }
            }
        }
    }
    .mod-03 {  background:url(../images/service/guwen/bg_02.jpg) no-repeat center top;  padding: 40px 0 40px 0;
        ul { @extend .clearfloat; margin-top:40px;
            li { float: left; width:160px; height:180px; margin-left:65px; text-align: center; 
                h4 { color: #000; font-size: 36px; line-height: 2; padding: 10px 0 5px 0; color: $pink; }
            }
        }
    }
    .mod-04 { padding: 40px 0 40px 0;
        ul { @extend .clearfloat; margin-top:40px;
            li { float: left; width:166px; height:220px; margin-left:180px; text-align: center;
                i { display: block; width: 100px; height: 100px; margin: 0 auto; background:url(../images/service/icon_01.png) no-repeat; 
                    &.i2 { background-position: -100px 0; }
                    &.i3 { background-position: -200px 0; }
                    &.i4 { background-position: -300px 0; }
                    &.i5 { background-position: -400px 0; }
                    &.i6 { background-position: -500px 0; }
                    &.i7 { background-position: -600px 0; }
                    &.i8 { background-position: -700px 0; }
                    &.i9 { background-position: -800px 0; }
                    &.i10 { background-position: -900px 0; }
                    &.i11 { background-position: 0px -100px; }
                    &.i12 { background-position: -200px -100px; }
                    &.i13 { background-position: -200px -100px; }
                    &.i14 { background-position: -300px -100px; }
                    &.i15 { background-position: -400px -100px; }
                    &.i16 { background-position: -500px -100px; }
                    &.i17 { background-position: -600px -100px; }
                    &.i18 { background-position: -700px -100px; }
                    &.i19 { background-position: -800px -100px; }
                    &.i20 { background-position: -900px -100px; }
                }
                h4 { color: #000; font-size: 18px; padding: 10px 0 5px 0; }
            }
        }
    }
    // 劳动风险
    .mod-05 {  background:url(../images/service/labour/bg_01.jpg) no-repeat center top;  height: 600px; color:#000;
        h2 { @include abs(465px,300px); font-size:30px; line-height: 40px;  text-align: center; }
        .p1 { @include abs(128px,144px);font-size:18px; line-height: 36px; width: 200px; }
        .p2 { @include abs(128px,260px);font-size:18px; line-height: 36px; width: 200px; }
        .p3 { @include abs(128px,376px);font-size:18px; line-height: 36px; width: 200px; }
        .p4 { @include abs(450px,76px);font-size:18px; line-height: 36px; }
        .p5 { @include abs(920px,144px);font-size:18px; line-height: 36px; width: 220px; }
        .p6 { @include abs(920px,260px);font-size:18px; line-height: 36px; width: 220px; }
        .p7 { @include abs(920px,376px);font-size:18px; line-height: 36px; width: 220px; }
    }
    .mod-06 {  background:url(../images/service/labour/bg_02.jpg) no-repeat center top; font-size:16px; line-height: 30px; height: 630px; color:#000; padding-top:40px;
        .p1 { @include abs(150px,154px); }
        .p2 { @include abs(150px,250px); }
        .p3 { @include abs(150px,374px); }
        .p4 { @include abs(150px,480px); }
    }
    // 律师函
    .mod-07 {  background:url(../images/service/lawletter/bg_01.png) no-repeat center top;  height: 690px; color:#000;
        h2 { @include abs(230px,140px); font-size:70px; color:$blue; text-align: center; }
        .p1 { @include abs(128px,235px);font-size:40px; line-height: 36px; }
        .p2 { @include abs(180px,314px);font-size:20px; line-height: 36px; }
    }
    .mod-08 {  background:#fff url(../images/service/lawletter/bg_02.jpg) no-repeat center 156px; font-size:16px; line-height: 30px; height: 1000px; color:#000; padding-top:40px;
        p { line-height: 24px; margin-top: 24px; 
            span { float: left; width: 24px; background: $yellow; height: 24px; text-align: center; margin-right: 20px; border-radius: 50%;}
        }
        h2 { font-size:36px; color: #000; line-height: 2; text-align: center; font-weight:200; }    
        .text01 { @include abs(190px,190px); width:260px; } 
        .text02 { @include abs(760px,190px); width:260px; 
            p span { background: #000; color: $yellow; }
        } 
        .text03 { @include abs(160px,600px); width:900px; 
            p span { border-radius: 4px; }
        } 
    }
    // 股权架构设计
    .mod-09 {  background:url(../images/service/gqjg/bg_01.png) no-repeat center top;  height: 690px; color:#000; font-size:16px;
        h2 { @include abs(520px,250px); font-size:24px; line-height:36px; }
        .p1 { @include abs(50px,145px); }
        .p2 { @include abs(50px,235px); }
        .p3 { @include abs(50px,335px); }
        .p4 { @include abs(760px,145px); }
        .p5 { @include abs(760px,235px); }
        .p6 { @include abs(760px,335px); }
        .p7 { @include abs(410px,445px); }
    }
    .mod-10 { padding: 40px 0 60px 0;
        ul { @extend .clearfloat; margin-top:30px;
            li { float: left; width:320px; height:285px; margin-left:60px; background:#f5f5f5; line-height:24px; color:#999; font-size:14px;
                p { padding: 0 15px; }
                em { display: block; color: #000;  }
            }
        }
    }
    .mod-11 { padding: 40px 0 40px 0;
        ul { @extend .clearfloat; margin-top:40px;
            li { float: left; width:130px; height:220px; margin-left:200px; text-align: center; 
                i { display: block; width: 100px; height: 100px; margin: 0 auto; background:url(../images/service/icon_01.png) no-repeat; 
                    &.i1 { background-position: 0px -400px; }
                    &.i2 { background-position: -100px -400px; }
                    &.i3 { background-position: -200px -400px; }
                }
                h4 { color: #000; font-size: 24px; padding: 15px 0 10px 0; }
            }
        }
    }
    .mod-12 { padding: 40px 0 40px 0;
        ul { @extend .clearfloat; margin-top:40px;
            li { float: left; width:330px; height:120px; margin-left:180px; margin-bottom: 30px;
                i { float: left; display: block; width: 100px; height: 100px; margin-top:20px; background:url(../images/service/icon_01.png) no-repeat; 
                    &.i1 { background-position: 0px -600px; }
                    &.i2 { background-position: -100px -600px; }
                    &.i3 { background-position: -200px -600px; }
                    &.i4 { background-position: -300px -600px; }
                    &.i5 { background-position: -400px -600px; }
                    &.i6 { background-position: -500px -600px; }
                    &.i7 { background-position: -400px -700px; }
                    &.i8 { background-position: -500px -700px; }
                    &.i9 { background-position: -600px -700px; }
                    &.i10 { background-position: -700px -700px; }
                }
                p { float:right; width:230px; color: #000; font-size: 18px; line-height: 30px; }
            }
        }
    }
    .mod-13 { padding: 40px 0 40px 0;
        ul { @extend .clearfloat; margin-top:40px;
            li { float: left; width:100px; height:220px; margin-left:120px; text-align: center;
                i { display: block; width: 100px; height: 100px; margin: 0 auto; background:url(../images/service/icon_01.png) no-repeat; 
                    &.i1 { background-position: -400px 0; }
                    &.i2 { background-position: -600px 0; }
                    &.i3 { background-position: -700px 0; }
                    &.i4 { background-position: -800px 0; }
                    &.i5 { background-position: -900px 0; }
                }
                h4 { color: #000; font-size: 18px; line-height: 28px; }
            }
        }
    }
    // 股权激励方案
    .mod-14 {  background:url(../images/service/gqjl/bg_01.jpg) no-repeat center top;  height: 400px; color:#000; 
        .p1 { @include abs(196px,92px); font-size:24px; }
        .p2 { @include abs(316px,140px); font-size:24px; }
        .p3 { @include abs(316px,190px); font-size: 36px; }
        .p4 { @include abs(316px,262px); font-size:22px; }
    }
    .mod-15 { padding:40px 50px; line-height: 30px; color: #000; 
        .p1 { font-size:24px; margin:20px 0; }
        .p2 { color: #5a5a5a; }
        .p3 { padding:25px; margin-top:15px; background:url(../images/service/gqjl/bg_02.jpg) no-repeat left top; height:100px; }
        ul { @extend .clearfloat; margin-top:40px;
            li { float: left; width:280px; height:160px; margin-right:120px; 
                &:nth-of-type(3n) { margin-right:0; }
                p { height: 70px; }
                span { display: block; width: 100px; line-height: 30px; text-align: center; background: $yellow; font-size: 16px; border-radius: 4px; }
            }
        }
    }
    .mod-16 { padding: 40px 0 40px 0;
        .p1 { width: 900px; margin:10px auto; }
        ul { @extend .clearfloat; margin:50px auto 0 auto; width: 1000px;
            li { float: left; width:250px; height:180px;text-align: center; 
                i { display: block; width: 100px; height: 100px; margin: 0 auto; background:url(../images/service/icon_01.png) no-repeat; 
                    &.i1 { background-position: 0px -700px; }
                    &.i2 { background-position: -100px -700px; }
                    &.i3 { background-position: -200px -700px; }
                    &.i4 { background-position: -300px -700px; }
                }
                h4 { color: #000; font-size: 18px; padding: 15px 0 10px 0; }
            }
        }
    }
    // 投融资顾问
    .mod-17 {  background:url(../images/service/trzgw/bg_01.jpg) no-repeat center top;  height: 400px; color:#000; 
        .p1 { @include abs(76px,92px); font-size:48px; color: #5a5a5a; }
        .p2 { @include abs(76px,155px); font-size:30px; color: #5a5a5a; }
        .p3 { @include abs(76px,205px); font-size: 30px; }
        .p4 { @include abs(100px,272px); font-size:16px; }
    }
    .mod-18 { padding: 40px 0 40px 0;
        ul { @extend .clearfloat; margin-top:40px;
            li { float: left; width:260px; height:280px; margin-left:110px; text-align: center; 
                i { display: block; width: 120px; height: 120px; margin: 0 auto; background:url(../images/service/icon_01.png) no-repeat; 
                    &.i1 { background-position: 0px -800px; }
                    &.i2 { background-position: -200px -800px; }
                    &.i3 { background-position: -400px -800px; }
                    &.i4 { background-position: -600px -800px; }
                    &.i5 { background-position: -800px -800px; }
                }
                h4 { color: #000; font-size: 24px; padding: 15px 0 10px 0; }
            }
        }
    }
    .mod-19 { padding: 40px 0 40px 0;
        ul { @extend .clearfloat; margin:0 auto; margin-top:40px; width: 960px; 
            li { height:120px; margin-bottom: 30px; @extend .clearfloat;
                i { float: left; margin-right: 24px; display: block; text-align: center; width: 74px; height: 74px; line-height: 74px; font-size:24px; color: #000; font-style:normal; margin-top:10px; background:$yellow; border-radius: 50%; }
                p { float:left; font-size:16px; width:840px; line-height: 30px; 
                    em { display: block; color: #000; font-size: 24px; padding-bottom: 10px; }
                }
            }
        }
    }
    // 教你打官司
    .mod-20 {  background:url(../images/service/jndgs/bg_01.png) no-repeat center top;  height: 400px; color:#000; 
        .p1 { @include abs(96px,100px); font-size:24px; }
        .p2 { @include abs(96px,155px); font-size:30px; }
        .p3 { @include abs(176px,220px); font-size: 20px; }
    }
    .mod-21 { padding: 40px 0 80px 0;
        ul { @extend .clearfloat; margin-top:40px;
            li { float: left; width:240px; height:300px; margin-left:48px;
                em { display: block; color: #000; font-size: 18px; padding: 10px 0 5px 0; }
            }
        }
    }
    .mod-22 { padding: 40px 0 80px 0; @extend .clearfloat; color: #000;
        .text { float:left; margin-left:100px; margin-top:40px; width:460px; height:250px; box-shadow: 0 0 15px rgba(0,0,0,0.1);
            h4 { line-height: 50px; text-align: center; font-size:24px; background: $yellow;  }
            ul { padding:20px 60px; @extend .clearfloat; 
                li { float: left; width: 140px; position: relative; padding-left: 30px; margin-bottom:10px;
                    &.li100 { width:300px; }
                    i { @include abs(0,2px); display: block; width:20px; height:20px; line-height: 20px; font-size: 14px;  background: $yellow; text-align: center; border-radius: 50%; }
                }
            }
        }
    }

    // <div class="mod mod-22">
    //     <h2 class="mod-title">我们提供<span class='blue'>哪些服务</span>？</h2>
    //     <div class="text text01">
    //         <h4>代写文书</h4>
    //         <ul>
    //             <li><span></span>仲裁申请书</li>
    //             <li><span></span>代理词</li>
    //             <li><span></span>起诉状</li>
    //             <li><span></span>强制执行申请书</li>
    //             <li><span></span>证据清单</li>
    //             <li><span></span>质证意见</li>
    //             <li><span></span>答辩状</li>
    //         </ul>
    //     </div>
    //     <div class="text text02">
    //         <h4>诉讼策略</h4>
    //         <ul>
    //             <li><span></span>我们将全程为您提供案件咨询，包括如何起诉、应诉、开庭注意事项等等。</li>
    //         </ul>
    //     </div>
    // </div>
}

// 顾问套餐
.guwen-detail-shadow { display: none; position: fixed; z-index: 100; left:0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); }
.guwen-detail { display: none; transform:scale(0); transition:.5s All ease;  position: fixed; top:50%; left: 50%; margin:-300px 0 0 -400px; background: #fff;  z-index: 200; width: 760px; padding: 20px; height: 560px; overflow-y:scroll; @extend .boxShadow; border-radius: 0; font-size:14px; line-height: 1.5;
    // .close { }
    h2 { font-size:24px; color:$blue; line-height: 2; text-align: center; }
    table { border-collapse: collapse; line-height: 2; width: 100%; margin-top:20px;
        th { background: #f6f6f6; text-align: center; }
        td,th { border: 1px solid $bordercolor; padding: 10px 20px; }
        h4 { font-size: 16px; color: #000; }
        tr td:first-of-type { font-size:12px; }
        tr td:last-of-type { text-align: center; color:$pink; }
    }
}
/* 订单 */
.order-box { margin: 40px auto; background: #fff; @extend .boxShadow; padding:20px 40px; width:1120px; font-size:14px; line-height: 30px;
    .order-info { 
        h2 { font-size:30px; color: #000; font-weight: normal; line-height: 2; }
        dl { position: relative; padding-left: 80px;  margin-top:20px; 
            i { position:absolute; top:20px; left:0; font-size:40px; color:$blue; }
            dt { font-size:16px; padding-bottom: 10px; }
            em { font-size:20px; }
            // span { color:#949494; }
            .red { font-size:24px; }
        }
    }
    .online-pay { margin-top:40px; border-bottom: 1px solid $bordercolor; padding-bottom: 40px;
        h4 { font-size:20px; line-height: 2; }
        .pay-way { @extend .clearfloat; margin-top:20px;
            li { float:left; width: 140px; height:40px ; @extend .icon-01; background-position:-200px -300px; margin-right:40px; line-height: 40px; color:#000;
                &.active { background-position:0 -300px; }
                .wx { color:#31c325; }
                .zfb { color:#295ccf; }
                i { font-size:30px; margin-right:8px; float: left; width:50px; text-align:right; }
            }
        }
    }
    .transfer-pay { margin-top:40px;  padding-bottom: 40px;
        h4 { font-size:20px; line-height: 2; 
            span { font-size:14px; margin-left:14px; }
        }
        ul { @extend .clearfloat; margin-top:20px; 
            li { float: left; position:relative; height:80px;  width:260px; padding: 20px; padding-left:220px;  border: 1px solid $bordercolor; margin-right:20px;
                img { @include abs(20px,20px); }
                p { height:27px; line-height: 27px; @extend .clearfloat; 
                    span { float:left; width: 90px; color: #949494; }
                }
            }
        }
        .have-transfer { @extend .btn; @extend .btn-yellow; display: block; color:#000;width: 120px; margin-top:30px; }
    }
    // <!-- 微信支付二维码 -->
    .weixin-pay { display: none; z-index:200; position:fixed; top:50%; left:50%; margin:-180px 0 0 -150px; background: #fff; width:300px; height:360px; 
        .close { display: block; position: absolute; top:5px; right:10px; width:30px; height:30px; text-align:center;}
        h4 { background: #ccc; color:#000; font-size:16px; padding:5px 20px; line-height: 30px; }
        .wx-ewm { padding:30px 20px; text-align:center; }
        table { margin:0 auto; }
        p { text-align: center; padding: 0 20px; }
    }
}
.border-box { margin:40px auto; 
    .step { margin:0 auto; width:725px; background:url(../images/order-step.png) no-repeat center top; height:40px; }
    .step01 { background-position:0 0; }
    .step02 { background-position:0 -40px; }
    .step03 { background-position:0 -80px; }
    .step04 { background-position:0 -120px; }
    .border-info { background:#fff; @extend .boxShadow; margin-top:40px; padding:30px 40px;
        h2 {  text-align: center; font-size:24px; color:#000; margin-bottom:40px; }
        .order-info-detail { border: 1px solid $bordercolor; background: #f1f1f1; line-height: 40px; font-size: 14px; color: #666;  
            .des { padding:10px 10px; 
                em { font-size:16px; color:$blue;}
            }
            .des span { float: right; }
            .price { background: #fff; padding:10px 10px; }
            .price em { font-size: 18px; color: $red; }
        }
        textarea { margin-top: 40px;  resize:none;  border-radius: 8px; width:878px; border: 1px solid #ccc; padding: 20px; display: block; font-size:14px; }
        .subAdvisory , .submit-but { @extend .btn; @extend .btn-yellow; display:block; margin:40px auto; font-size:18px; color:#000; width:100px; }
    }

    
}
// 订单支付
.border-info {
    .order-info-item {line-height:2; margin-bottom:40px; font-size:14px;
        dt { font-size:18px; color:#000; line-height: 50px; }
        dd { border:1px solid $bordercolor; padding:10px 20px; border-radius:6px;
            
        }
    }
    .pay-way { line-height: 50px;
         li{overflow: hidden;margin: 20px 0; width:500px;}
         span{float: left;line-height: 50px;}
        .winxin-icon{background: url(../images/pay/weixin1.png) no-repeat; width: 50px; height: 50px;display:inline-block; }
        .zhifubao-icon{background: url(../images/pay/zhifubao.png) no-repeat;width: 50px; height: 50px;display:inline-block;}
        .qianbao-icon{background: url(../images/pay/qianbao.png) no-repeat;width: 50px; height: 50px;display:inline-block;}
        .pay-type{font-size: 18px;color: #3b3b3b;margin: 0 10px 0 20px;}
        .checkboxIcon{background: url(../images/pay/checkbox.png) no-repeat;width:32px; height:32px;float: right;cursor: pointer;}
        .checkedIcon{background: url(../images/pay/checked.png) no-repeat;width:32px; height:32px;float: right;cursor: pointer;}
    }
}



/* 用户中心 */
.user-center { 
    .user-banner { background:url(../images/user/banner.jpg) no-repeat center top; height:320px; 
        .user-center-top { padding:80px 0; 
            img { float:left;  width: 140px; height:140px; border:10px solid #fff; margin-right:30px; border-radius:50%; }
            .name { float:left; font-size:18px; color:$gray; line-height:1.5; margin-top:50px;
                em { font-size:30px; color:#000; display:block; }
            }
        }
    }
    .user-center-con { @extend .clearfloat; margin-top:40px; background: #fff; @extend .boxShadow; border-radius: 0; overflow:hidden; margin-bottom:40px;
        .user-nav { width:200px; font-size:18px; background: #ebebeb; margin-bottom: -9999px; padding-bottom: 9999px;
            dl { line-height: 50px;
                dt { background: $yellow; color: #000; font-size:16px; padding-left: 20px; height:50px;
                    i { font-size: 26px; float:left; width:40px; }
                }
                dd { 
                    a { display: block; font-size:14px; padding-left: 60px;
                        &:hover ,&.current { color:$blue; }
                    }
                }
            }
        }
        .user-right-con { padding:20px 40px; width:920px; padding-bottom:40px; min-height:500px;  
            h2 { color:#000; font-size:24px; line-height:40px; padding-bottom: 15px; border-bottom: 1px solid #ebebeb; margin-bottom: 30px; }
        }
    }
}
// 个人资料
.user-info { width:600px;
    li { @extend .clearfloat; border-bottom:1px solid $bordercolor; line-height:30px; padding:30px 0; font-size:14px; color:#999;
        .user-head { width:100px; height:100px; }
        span { float:left; margin-right:10px; }
        em { color:#000; font-size:18px; }
        a { float:right; width:80px; @extend .boxShadow; background: $yellow; font-size:14px; text-align:center; }
    }
}
// 我的订单
.my-order {
    table { border-collapse: collapse;  width: 100%; text-align: center; line-height: 20px; font-size:12px; color:#000;
        th { background: #f5f5f5; }
        tr {  border-bottom:1px solid #ebebeb;
            &:first-of-type { border:1px solid #ebebeb; }
            th { padding:10px 20px; }
            td { padding: 20px;  }
            &:hover { background: #f5f5f5; }
            a { display: inline-block; padding: 0 10px; }
            .go-pay { background: $yellow; }
        }
    }
    // li { margin-bottom:20px; @extend .clearfloat; @extend .boxShadow; background:#fff; overflow:hidden; 
    //     h4 { background:#999; color:#fff; padding:0 20px; line-height:32px; 
    //         span { float:right; }
    //     }
    //     .info { @extend .clearfloat; padding:20px; font-size:14px; color:#999;
    //         em { color:#000; }
    //         .act { 
    //             a { float:right; @extend .btn; @extend .btn-red-line; line-height:28px; width:80px; margin-left:10px;  }
    //             .remove-order { @extend .btn-gray-line; }
    //         }
    //     }
    // }
}
// 我的服务
.my-service { @extend .clearfloat; width:900px;
    li { width:400px; float:left; margin-right:40px; margin-bottom:20px; @extend .clearfloat; @extend .boxShadow; background:#fff; overflow:hidden; 
        h4 { background:$yellow; color:#000; font-size:14px; padding:0 20px; line-height:32px; 
            span { float:right; }
        }
        .info { @extend .clearfloat; padding:20px; font-size:14px; color:#999;
            em { color:#000; }
            .act { 
                a { float:right; @extend .btn; @extend .btn-red-line; line-height:28px; width:80px; margin-left:10px;  }
                .remove-order { @extend .btn-gray-line; }
            }
        }
        &.have-service h4 { background:#999; color:#fff; }
    }
}
// 新闻收藏
.news-collect { width:600px;
    li { position:relative; border-bottom:1px dashed $bordercolor; padding:15px 10px; line-height:20px;  font-size:14px; padding-right:30px;
        em { float:left; display:inline-block; padding:0 10px; background:$yellow; color:#000; font-size:12px; @extend .boxShadow; text-align:center; margin-right:10px; }
        span { float:right; color:#999; }
        .cancel { position:absolute; right:0px; top:15px; display:none; color:$red; margin-left:20px; }
        &:hover .cancel { display:block; }
    }
}
// 我的咨询
.my-question{ width:840px;
    .question-list-item { border-bottom:1px solid $bordercolor; padding:20px 0;
        &:hover { 
            .question-title .main-t h4 { color:$blue; }
            .answer-wrap { display:block;}
        }
        .question-title { @extend .clearfloat; 
            .kind-name { font-size:14px; color:#000; line-height:1.2; text-align:center; @extend .icon-01; letter-spacing:1px; width:40px; height:43px; padding:6px 2px 0 3px; background-position:-1px -104px; }
            .main-t { width:630px; margin-left:10px; line-height:1.6; font-size:12px;
                h4 { color:$black; font-size:16px; }
            }
            .counts { width:130px; 
                li { float:left; width:65px; text-align:center; line-height:1.1;
                    em { color:$orange; font-size:20px; display:block; font-weight:normal; }
                }
            }
        }
    }
}
// 修改密码
.mod-password { width:520px;
     dl { @extend .clearfloat; line-height:40px; margin-bottom:20px;
        dt { float:left; width:100px; text-align:right; font-size:18px; color:#000; }
        dd { float:right; width:400px; }
    }
    input[type=password] { background: #fff; width:380px; border:1px solid $bordercolor; border-radius:4px; padding:9px 20px; line-height:20px; font-size:16px; color:#000; display:block; width:328px;  padding:15px; }
    input[type=button]  { background:$yellow; border-radius:4px; padding:15px 20px; line-height:22px; border:none; font-size:18px; color:#000; display:block; width:360px; }
}


/* 关于我们 */
.about-con { @extend .clearfloat; padding-bottom:100px; padding-top:20px; 
    .about-nav-wrap { width:240px; 
        .about-nav { background: #fff; @extend .boxShadow; overflow:hidden;
            dt { background: $yellow; padding:0 15px; color:#000; font-size:18px; line-height: 60px; }
            dd { padding:15px; font-size:14px;
                a { line-height: 40px; padding:0 15px; color:#000; margin-bottom:10px; display:block;
                    i { margin-top:10px; float:right; color:#333; font-size:12px; background: #dcdcdc; width: 20px; height: 20px; border-radius:50%; line-height: 20px; text-indent:6px; }
                    &:hover , &.current { background:#000; color:#fff; 
                        i { background:$yellow; }
                    }
                }
            }
        }
        .tel { margin-top:20px; @extend .boxShadow; 
            img { display:block; }
        }
    }
    .about-main-con { min-height:500px; background: #fff; padding:30px; @extend .boxShadow; width:880px; }
}
// 了解我们
.des-con {
    .con-item { line-height: 36px; font-size:14px; margin-bottom:40px; 
        h4 { font-size:30px; padding-bottom:20px; color:#000;
            span { font-size:24px; margin-left:10px; }
        }
        .con-text { @extend .clearfloat; 
            h5 { font-size: 18px; color:#000; }
            img { display:block; }
            .img { width:240px; }
            .text { width:600px; }
            .line { width:25px; border-bottom:2px solid #333; margin-top:20px; }
        }
    } 
}
// 联系我们
.contact-con {
    .con-item { line-height: 36px; font-size:14px; margin-bottom:40px; padding-left:40px;
        h4 { position:relative; font-size:30px; padding-bottom:10px; color:#000;
            span { position:absolute; top:15px; left:-40px; width:25px; border-bottom:2px solid #333; }
        }
        .con-text { @extend .clearfloat; }
         .ewm {  width: 330px; height:180px; text-align: center; color: #fff; background: rgba(33,42,49,0.8); border-radius: 3px; line-height: 20px; padding:10px 0; box-shadow: 0 8px 6px rgba(0,0,0,0.1); font-size: 14px; 
            li { float:left; width:150px; margin-left:10px; text-align:center; 
                img { width:100%; height:auto; }
            }
        }
    } 
}
// 平台特色
.feature-con { padding:15px; 
    .feature-info {
        dl { @extend .clearfloat; margin-top:50px; color:#777;
            img { float:left; margin-right:20px; }
            .text { float:left; font-size:16px; line-height:1.6; margin-top:5px;
                h4 { font-size:24px; color:#000; }
            }
        }
    }
    .paltform-promise {margin-top:60px; 
        dt { font-size:30px; color:#000; font-weight:bold; text-align:center; }
        dd { height:150px; border:1px solid $bordercolor; padding:15px;  color:#777; margin-top:30px;
            li { padding:15px 30px; line-height:30px; font-size:14px; float:left; width:210px; border-right:1px solid $bordercolor; 
                &:last-of-type { border:none; }
                h4 { width:100px; color:#000; font-size:18px; text-align:center; background: $yellow; margin-bottom:10px; }
            }
        }
    }

}

// 常见问题
.faq-con { 
    .con-item { padding:40px 40px 40px 90px; font-size: 14px; color:#5a5a5a; line-height: 30px; position:relative; min-height:120px;
        .num { position: absolute; top:50px; left:0; width:56px; height:37px; background: url(../images/about/num.png) no-repeat; 
            &.num-02 { background-position: 0 -37px; }
            &.num-03 { background-position: 0 -74px; }
            &.num-04 { background-position: 0 -111px; }
            &.num-05 { background-position: 0 -148px; }
            &.num-06 { background-position: 0 -185px; }
            &.num-07 { background-position: 0 -222px; }
            &.num-08 { background-position: 0 -259px; }
            &.num-09 { background-position: 0 -296px; }
            &.num-10 { background-position: 0 -333px; }
        }
        h4 { font-size: 24px; line-height: 40px; color:#000000; padding-bottom: 15px; }
    }
}

// 操作说明
.operate-con {
    .operate-step {  height:470px; padding-top:130px; background: center 0px url(../images/about/operate-01.jpg) no-repeat; }
    .operate-step-02 { background-image: url(../images/about/operate-02.jpg); }
    .operate-step-03 { background-image: url(../images/about/operate-03.jpg); }
    .step-info { margin-left:50px; width:500px; font-size:22px; line-height: 1.5;
        h2 { font-size: 48px;  margin-bottom:10px;
            em { color: $yellow; }
        }
        h4 { font-size: 40px; color:$blue; margin-bottom:20px; }
        a { display: block; margin-top:30px; width:100px;  @extend .btn; @extend .btn-yellow; font-size:16px; color: #000; }
    }
    .step-info-02 { color:#969696; 
        h4 { color: $yellow; }
    }
}